<template>
  <ga-scrollbar type="track" style="height: calc(100vh - 214px); overflow: auto">
    <div class="app_card">
      <ga-list :loading="loading" :bordered="false">
        <ga-list-item
          v-for="(item, index) in dataList"
          :key="item.id"
          class="hover_card"
          :class="index === activeId ? 'active' : ''"
          @click="handleClickItem(item, index)"
        >
          <ga-list-item-meta>
            <template #title>
              <slot name="content" :item="item"/>
            </template>
          </ga-list-item-meta>
          <template v-if="index === activeId && isShowBtn" #actions>
            <SvgIcon icon-class="edit" size="20px" @click="handleEdit(item,'edit')" />
            <SvgIcon icon-class="del" size="20px"  @click="handleEdit(item,'delete')" />
          </template>
        </ga-list-item>
      </ga-list>
    </div>
  </ga-scrollbar>
</template>

<script setup>
  import { ref, defineEmits,watch } from 'vue';
   
  const props =defineProps({
    dataList: {
      type: Array,
      default: () => [{ appname: 'appname', chinese_name: 'chinese_name' }],
    },
    isShowDelete: {
      type: Boolean,
      default: true,
    },
    isShowBtn: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: true,
    },
  });
  const activeId = ref(0);
  const emits = defineEmits(['handleEdit','handleDelete','handleClickItem']);
  // 处理方法
  const handleClickItem = (item, index) => {
    activeId.value = index;
    emits('handleClickItem', item)
  };
  const handleEdit = (item,type) => {
    if(type === 'edit') emits('handleEdit', item) 
    else emits('handleDelete', item)
  }
  
  watch(() => props.dataList, (newVal) => {
    if(newVal) handleClickItem(newVal?.[0],0)
  });

</script>

<style lang="scss" scoped>
  .app_card {
    .tlt {
      line-height: 22px;
      color: #0f5ef7;
    }
    .tlt_chinese {
      line-height: 22px;
      font-size: 14px;
      color: #2c406899;
    }
   
    .active {
      background: #eef4ff;
      border: 1px solid #0f5ef7;
    }
    :deep(.garco-list-item) {
      cursor: pointer;
    }
    
    .flex_center{
      p{
        min-width:48px;
        margin-left: 4px;
      }
    }
  }
  .hover_card{
    &&:hover{
      background: #eef4ff;
    }
  }

  :deep(.garco-scrollbar-track-direction-vertical){
    width: 8px;
  }
  :deep(.garco-list-item-action>li:not(:last-child)){
    margin-right: 8px;
  }
  .app_card[data-v-80321e47] .garco-list-item{
    padding: 8px 16px;
  }
  :deep(.garco-scrollbar-container){
    overflow: visible;
  }
</style>
